<template>
  <div class="wrap w-index">
    <main class="position-box">
    <cube-scroll
    ref="scroll"
    :data="items"
    :options="options"
    @pulling-down="onPullingDown"
    @pulling-up="onPullingUp">  
  
    
    <div class="banner">
        <div class="bg">
            <div class="swiper-container swiper1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img @click="toAbout" src="@/assets/img/banner1.jpg" alt="" /></div>
                    <div class="swiper-slide"><img @click="toAbout" src="@/assets/img/banner2.jpg" alt="" /></div>
                    <div class="swiper-slide"><img @click="toAbout" src="@/assets/img/banner3.jpg" alt="" /></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    <div class="menus ">
        <div class="scroll swiper-container swiper3">
            <div class="items clearfix swiper-wrapper">

                <div class="item swiper-slide" @click="toTypeBidList" data-id="10">
                        <img src="@/assets/img/menus1.png" alt="" />
                        <p>医用耗材</p>
                </div>
                <div class="item swiper-slide" @click="toTypeBidList" data-id="20">
                        <img src="@/assets/img/menus2.png" alt="" />
                        <p>医疗设备</p>
                </div>
                <div class="item swiper-slide" @click="toTypeBidList" data-id="30">
                        <img src="@/assets/img/menus3.png" alt="" />
                        <p>外科器械</p>
                </div>
                <div class="item swiper-slide" @click="toTypeBidList" data-id="40">
                        <img src="@/assets/img/menus4.png" alt="" />
                        <p>康复护理</p>
                </div>
                <div class="item swiper-slide" @click="toTypeBidList" data-id="50">
                        <img src="@/assets/img/menus5.png" alt="" />
                        <p>宠物用品</p>
                </div>
                <div class="item swiper-slide" @click="toTypeBidList" data-id="60">
                        <img src="@/assets/img/menus6.png" alt="" />
                        <p>医院其他</p>
                </div>
            </div>
<!--              <div class="swiper-pagination"></div>
 -->
        </div>
    </div>
    <div class="info">
        <!-- <p class="tit clearfix">
            真正的“零”招标，招标不成功，100%退还保证金！
            <img src="@/assets/img/info_tit.png" alt="" />
        </p> -->
        <div class="gonggao clearfix" @click="toNotice">
            <div class="img"><img src="@/assets/img/gonggao.png" alt="" /></div>
            <div class="swiper-container swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <a href="#">公告：{{notice[0]}}</a>
                      <img src="@/assets/img/r_w.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <a href="#">公告：{{notice[1]}}</a>
                      <img src="@/assets/img/r_w.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <a href="#">公告：{{notice[2]}}</a>
                      <img src="@/assets/img/r_w.png" alt="" />
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="num clearfix">
            <div class="item">
                <span>{{total[1]}}</span>
                <p>招标中</p>
            </div>
            <div class="item">
                <span>{{total[0]}}</span>
                <p>已完成</p>
            </div>
            <div class="item">
                <span>{{total[2]}}</span>
                <p>供应商数量</p>
            </div>
        </div>
    </div>
    <div class="tab">
        <div class="tit clearfix">
            <div :class="tab == 20?tab_class:tab_class_no" @click="tabChange" data-tab="20">
                <p>
                    <img :src="tab1" alt="" />
                    <span>招标中</span>
                </p>
            </div>
            <div :class="tab == 70?tab_class:tab_class_no" @click="tabChange" data-tab="70">
                <p>
                    <img :src="tab2" alt="" />
                    <span>已成交</span>
                </p>
            </div>
            <div :class="tab == 100?tab_class:tab_class_no" @click="tabChange" data-tab="100">
                <p>
                    <img :src="tab3" alt="" />
                    <span>已报名</span>
                </p>
            </div>
        </div>
        <div class="con con1" v-if="tab == 20" v-for="(val,index) in bidBeing">
            <div class="item" :data-bidid="val.bid_id" @click="toDetail">
                <div class="name clearfix">
                    <div class="flag">{{val.bid_type}}</div>
                    <h3>{{val.bid_name}}</h3>
                    <button @click.stop="enrollBid" :data-bidid="val.bid_id" :data-id="index" v-if="!val.is_enlist">
                      立即报名
                    </button>
                    <button disabled="disabled" v-else>
                      已报名
                    </button>
                </div>
                <div class="text">
                    <!--上下三角-->
                    <div :class="!val.show_remark ? 'font' : 'font show-text'">
                    {{val.bid_remark}}
                    </div>
                    <div :class="!val.show_remark ? 'icon' : 'icon show-text'" @click.stop="showTxt(index)">
                        <img :src="!val.show_remark ? up_img : down_img" alt="" />
                    </div>
                </div>
                <div class="infos clearfix">
                    <div class="left">
                        {{val.countDown}}
                    </div>
                    <div class="right">
                        <div class="list">
                            发布者：{{val.bid_user_company}}
                        </div>
                        <div class="list">
                            竞标人数：{{val.bid_enlist_num}}
                        </div>
                        <div class="list">
                            位置：{{val.city_id}}
                        </div>
                        <div class="list">
                            日期：{{val.time}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="con con1 con2 con3" v-if="tab == 70" v-for="(val,index) in bidDone">
            <div class="item" :data-bidid="val.bid_id" @click="toDetail">
                <div class="name clearfix">
                    <div class="flag">{{val.bid_type}}</div>
                    <h3>{{val.bid_name}}</h3>
                    <!-- <button @click.stop="enrollBid" :data-bidid="val.bid_id" :data-id="index" v-if="!val.is_enlist">
                      立即报名
                    </button>
                    <button disabled="disabled" v-else>
                      已报名
                    </button> -->
                </div>
                <div class="text">
                    <!--上下三角-->
                    <div :class="!val.show_remark ? 'font' : 'font show-text'">
                    {{val.bid_remark}}
                    </div>
                    <div :class="!val.show_remark ? 'icon' : 'icon show-text'" @click.stop="showTxt(index)">
                        <img :src="!val.show_remark ? up_img : down_img" alt="" />
                    </div>
                </div>
                <div class="infos clearfix">
                    <div class="right">
                        <div class="list">
                            发布者：{{val.bid_user_company}}
                        </div>
                        
                        <div class="list">
                            位置：{{val.city_id}}
                        </div>
                        <div class="list">
                            中标：{{val.time}}
                        </div><div class="list">
                            竞标人数：{{val.bid_enlist_num}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="con con1 con2 con3" v-if="tab == 100"  v-for="(val,index) in bidColl">
            <div class="item" :data-bidid="val.bid_id" @click="toDetail">
                <div class="name clearfix">
                    <div class="flag">{{val.bid_type}}</div>
                    <h3>{{val.bid_name}}</h3>
                    <button @click.stop="enrollBid" :data-bidid="val.bid_id" :data-id="index" v-if="!val.is_enlist">
                      立即报名
                    </button>
                    <button disabled="disabled" v-else>
                      已报名
                    </button>
                </div>
                <div class="text">
                    <!--上下三角-->
                    <div :class="!val.show_remark ? 'font' : 'font show-text'">
                    {{val.bid_remark}}
                    </div>
                    <div :class="!val.show_remark ? 'icon' : 'icon show-text'" @click.stop="showTxt(index)">
                        <img :src="!val.show_remark ? up_img : down_img" alt="" />
                    </div>
                </div>
                <div class="infos clearfix">
                    <div class="right">
                        <div class="list">
                            发布者：{{val.bid_user_company}}
                        </div>
                        <div class="list">
                            竞标人数：{{val.bid_enlist_num}}
                        </div>
                        <div class="list">
                            位置：{{val.city_id}}
                        </div>
                        <div class="list">
                            日期：{{val.time}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
    </div>
 </cube-scroll>
</main>

    <Bartab />
</div>

</template>



<script>
// @ is an alias to /src
import Bartab from '@/components/Bartab.vue'
import Swiper from 'swiper';
//图片
//选项卡 左边小图片
import tab_icon1 from '@/assets/img/tab_icon1.png'
import tab_icon1_sel from '@/assets/img/tab_icon1_sel.png'
import tab_icon2 from '@/assets/img/tab_icon2.png'
import tab_icon2_sel from '@/assets/img/tab_icon2_sel.png'
import tab_icon3 from '@/assets/img/tab_icon3.png'
import tab_icon3_sel from '@/assets/img/tab_icon3_sel.png'
//选项卡背景，带下箭头， 不带下箭头
import tabs_bg1 from '@/assets/img/tab_tit_bg.png'
import tabs_bg2 from '@/assets/img/tab_tit_bg.png'
//上三角 ，下三角
import up_img from '@/assets/img/up.png'
import down_img from '@/assets/img/down.png'


export default {
  name: 'home',
  data(){
    return{
        banner: [],//轮播图片路径
        //以上 轮播数据
        ad:'',//广告语
        notice: [],//公告轮播数据
        total:[],//统计

        tab:20,//tab 20 招标中 70已完成，100 已收藏
        tabIndex: 1,
        bidBeing: {},//已发布
        bidDone: {},//已完成
        bidColl: {},//收藏的
        bidBeingPage:1,
        bidDonePage:1,
        bidCollPage:1,
        userInfo:'',
        listData:[],
        downTime:'',//倒计时

        //样式
        tab_class_no:'tt',
        tab_class:'tt act',
        //图片
        tab1:tab_icon1_sel,
        tab2:tab_icon2,
        tab3:tab_icon3,
        //上下三角
        down_img:down_img,
        up_img:up_img,

        //上拉加载，下拉刷新
        items:[],
         options: {
              // 配置下拉刷新 
              pullDownRefresh: {
                  threshold: 60,
                  stop: 40,
                  txt:'刷新'
              }, 
              // 配置上拉加载更多 
              pullUpLoad: {
                  threshold: 0,
                  txt: {
                      more: '加载更多',
                      noMore: '没有更多数据'
                  }
              }
              // 配置上拉加载，若要关闭可直接 pullUpLoad：false
          },

      // pullDownY: 0,
      // pullDownStyle: '',
      // opacityStyle: '',
      // triggerSurpriseFlag: false,
      // triggerSurprise: false

     }
  },
  computed: {
    
  },
  methods:{
    //上下三角
    showTxt(index){
        let arr =[];
        if(this.tab == 20){
         arr = this.bidBeing;
        }else if(this.tab == 70){
         arr = this.bidDone;
        }else if(this.tab == 100){
         arr = this.bidColl;
        }
        if (arr[index].show_remark == false) {
          arr[index].show_remark = true;
        } else {
          arr[index].show_remark = false;
        }
        this.bidBeing = arr

    },
   //报名
   async enrollBid(e){  
        let bidId = e.currentTarget.getAttribute('data-bidid')
        let id = e.currentTarget.getAttribute('data-id')
        let arr = this.bidBeing;
        //tab 20 招标中 70已完成，100 已收藏
        let re = await this.$axios.post('bid/enrollBid',{
            bid_id:bidId
        });
         if(re.code == 200){
                this.$createDialog({
                    type: 'alert',
                    title: '提示',
                    content: '报名成功',
                    icon: ''
                  }).show()
              //改变报名按钮
              arr[id].is_enlist = 1;
              this.bidBeing = arr
            //未认证
            }else if(re.code == 201){
              this.$router.push({path:'/register/status'})
            }else{
                this.$createDialog({
                    type: 'alert',
                    title: '提示',
                    content: re.msg,
                    icon: ''
                  }).show()
            }
    },
    //tab 切换
    async tabChange(e){
      let  tab = e.currentTarget.getAttribute('data-tab')
      this.tab = tab;
      //图片修改
       if(this.tab == 20){
        this.tab1 = tab_icon1_sel
        this.tab2 = tab_icon2
        this.tab3 = tab_icon3
       }else if(this.tab == 70){
        this.tab1 = tab_icon1
        this.tab2 = tab_icon2_sel
        this.tab3 = tab_icon3
       }else if(this.tab ==100){
        this.tab1 = tab_icon1
        this.tab2 = tab_icon2
        this.tab3 = tab_icon3_sel

       }
     //获取数据
      let user_token = this.getUserToken()
      let res = await this.$axios.post('index/tabBidList',{
        tab:tab,
        user_token:user_token
      })
      if(res.code == 200){
          if(this.tab == 20){
               this.bidBeing = res.data.data
               this.bidBeingPage = res.data.page
          }else if(tab ==70){
               this.bidDone = res.data.data
               this.bidDonePage = res.data.page
          }else if(tab ==100){
               this.bidColl = res.data.data
               this.bidCollPage = res.data.page
          }
       }
       
    },
    //倒计时
   setCountDown(){
    let that =this
    let time = 1000;
    let lts = this.bidBeing;
         this.downTime = setInterval(function(){
          let list = lts.map(function (v, i){
            if (v.time1 <= 0) {
              v.time1 = 0;
            }
           let formatTime = that.getFormat(v.time1);
            v.time1 -= time;
            v.countDown = `${formatTime.hh}时${formatTime.mm}分${formatTime.ss}秒`;
            return v;

          })
            that.bidBeing = list

       }, time)
    },
  //单类型 标书列表
  toTypeBidList(e){
      let  bidtype = e.currentTarget.getAttribute('data-id')
      this.$router.push({path:'/bid/typebidlist',query: {
            bidtype: bidtype
          }})
   },
  //标书详情
  async toDetail(e){
    let that =this;
    let bidid = e.currentTarget.getAttribute('data-bidid')
    //let  tabnum  =  e.currentTarget.dataset.tabnum;
    let user_token = this.getUserToken()
    let res = await this.$axios.post('bid/getGoWhere',{
        bid_id:bidid,
        user_token:user_token
      })
        if(res.code == 200){
            this.$router.push({path:'/bid/'+res.data.toWhere,query: {
            bid_id: bidid,
            redirect:'/'
           }})
        }
        
   },
   //到公告列表
   toNotice(){
        this.$router.push({path:'/my/notice'})
   },
  //去关于我们
  toAbout(){
      this.$router.push({path:'/file/about'})

  },

   //下拉刷新
   async onPullingDown() {
        clearInterval(this.downTime);
        let that = this;
        let user_token = this.getUserToken()
        let re = await this.$axios.post('index/indexdata',{
              user_token:user_token,
            });

        if(re.code == 200){ 
             this.banner = re.data.banner
             this.ad = re.data.ad
             this.notice = re.data.notice
             this.bidBeing =  re.data.bidBeing.data
             this.bidBeingPage = re.data.bidBeing.page

            that.setCountDown();
        }

        this.$refs.scroll.forceUpdate()

    },
    //上拉加载更多
    async onPullingUp() {
          clearInterval(this.downTime);
          let that = this;
          let tab = this.tab;
          let page = 1;
          let bidBeingPage = this.bidBeingPage
          let bidDonePage = this.bidDonePage
          let bidCollPage = this.bidCollPage

          if(tab ==20){
              page = bidBeingPage+1;
            }else if(tab == 70){
              page = bidDonePage+1;
            }else if(tab == 100){
              page = bidCollPage+1;
            }
          //遮罩  
          const toast = this.$createToast({
            txt: '加载中...',
            //mask: true
          })
          toast.show()

            //获取数据
          let user_token = this.getUserToken()
          let re = await this.$axios.post('index/tabBidList',{
              tab:tab,
              user_token:user_token,
              page:page

            });

          if(re.code == 200){
                if(tab == 20){
                       this.bidBeing = re.data.data
                       this.bidBeingPage = re.data.page
                       this.tab = 20
                }else if(tab ==70){
                       this.bidDone = re.data.data
                       this.bidDonePage = re.data.page
                       this.tab = 70

                }else if(tab ==100){
                       this.bidColl = re.data.data
                       this.bidCollPage = re.data.page
                       this.tab = 100

                }
                
                this.items = re.data.data
                that.setCountDown();

            }
          toast.hide()
          this.$refs.scroll.forceUpdate()
    },
    
  },
  async created(){
    let user_token =this.getUserToken()
    let res = await this.$axios.post('/index/indexdata',{
        user_token:user_token
    })
    if(res.code == 200){ 
           this.banner = res.data.banner,
           this.ad = res.data.ad,
           this.notice = res.data.notice,
           this.total = res.data.total,
           this.bidBeing =  res.data.bidBeing.data,
           this.bidBeingPage = res.data.bidBeing.page
        this.setCountDown();

    }
  },
  beforeRouteLeave(to,from,next){
    clearInterval(this.downTime);
    next()
  },
  mounted(){
    new Swiper('.swiper1', {
            pagination: {
                el: '.swiper-pagination',
            },
            loop: true,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
        });

     let that = this;
  　　that.$nextTick(function(){
  　　　　var mySwiper = new Swiper('.swiper2', {
              direction: 'vertical',
              // loop: true,
              autoplay: {
                  delay: 3000,
                  stopOnLastSlide: false,
                  disableOnInteraction: false,
              },
          });
  　　})

    new Swiper('.swiper3', {
            // pagination: {
            //   el: '.swiper-pagination',
            //  },

            freeMode: true,
            slidesPerView: 4
        });


  },
  components: {
    'Bartab':Bartab
  }
}
</script>
<style>


.before-trigger span{
    font-size:0.32rem
}
.cube-pulldown-loaded span{
    font-size:0.38rem
}
</style>
